<template>
	<view class="box">
		<!-- #ifndef H5 -->
		<!-- 		<view class="search-input" :style="'height':+{{navHeight}}+'px'+';padding-top':+{{searchMarginTop}}+'px';">
			<view class="flex between input-box" :style="'height:'+{{searchHeight}}+'px';+'width': {{searchWidth}}+'px';'border: 1rpx solid #ccc;'">
				<input style="font-size: 20rpx;padding-top: 10rpx;box-sizing: border-box;" bindtap="inp" bindconfirm="search" />
			</view>
		</view> -->
		<view class="search-input" :style="{ height: navHeight + 'px', 'padding-top': searchMarginTop + 'px' }">
			<view class="flex between input-box" :style="{ height: searchHeight + 'px', width: searchWidth + 'px' }">
				<input style="font-size: 20rpx;padding-top: 10rpx;box-sizing: border-box;display: flex;align-items: center;" @tap="inp" bindconfirm="search" />
			</view>
		</view>
		<!-- #endif -->
		<!-- #ifdef H5 -->

		<view :class="[show == true ? 'head' : 'header']"><input class="input1" type="text" @click="inp" placeholder="请输入文本" /></view>
		<!-- #endif -->
		<!-- 轮播图组件 -->

		<view class="banner">
			<swiper :indicator-dots="true" :autoplay="true" :interval="5000">
				<swiper-item
					class="swiper-item"
					v-for="(item, index) in bannerList"
					:class="[index == 0 ? 'active' : '', index == 1 ? 'active2' : '', index == 2 ? 'active3' : '']"
					:key="index"
				>
					<view class="img">
						<image :src="item.imageUrl" mode="">{{ item.title }}</image>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<!-- //nav -->
		<view class="nav">
			<u-grid class="u-grid" :border="false" col="4" align="center">
				<u-grid-item
					style="border-radius: 50rpx;margin: 10rpx;width: 150rpx;height: 50rpx;"
					bgColor="#f8f9fb"
					v-for="(item, index) in list"
					:key="index"
					@click="navtap(item)"
				>
					<text class="grid-text">{{ item.name }}</text>
				</u-grid-item>
			</u-grid>
			<u-toast ref="uToast" />
		</view>
		<view class="list">
			<view class="h1">
				<view style="display: flex;padding: 0rpx 20rpx;">
					<view style="display: flex;justify-content: space-between;width: 100%;align-items: center;">
						<view style="font-size: 40rpx;display: flex;">
							热门推荐
							<view
								style="background-color: red;border-top-left-radius:10rpx;font-size: 14rpx;color: #fff;border-bottom-right-radius:10rpx;border-top-right-radius: 10rpx;padding: 6rpx;"
							>
								HOT
							</view>
						</view>

						<view style="color: #ccc;">全部></view>
					</view>
				</view>
			</view>
			<swiper next-margin="40rpx" style="height: 1050rpx;">
				<swiper-item class="swiper-item1" style="height: 1050rpx;"><LIST :list1="list1" @detaile="detail"></LIST></swiper-item>
				<swiper-item class="swiper-item1" style="height: 2000rpx;"><LIST :list1="list2" @detaile="detail"></LIST></swiper-item>
			</swiper>
		</view>
		<view class="foot">
			<view class="h1">
				<view style="display: flex;padding: 0rpx 20rpx;">
					<view style="display: flex;justify-content: space-between;width: 100%;align-items: center;">
						<view style="font-size: 40rpx;display: flex;">
							近期上新
							<view
								style="background-color: red;border-top-left-radius:10rpx;font-size: 14rpx;color: #fff;border-bottom-right-radius:10rpx;border-top-right-radius: 10rpx;padding: 6rpx;"
							>
								NEW
							</view>
						</view>

						<view style="color: #ccc;">全部></view>
					</view>
				</view>
			</view>
			<view>
				<swiper next-margin="440rpx" style="height: 340rpx;padding: 20rpx;box-sizing: border-box;">
					<swiper-item
						v-for="(item, index) in topBar"
						:key="index"
						class="swiper-item1"
						style="height: 300rpx;width: 270rpx;border: 1rpx solid #C8C9CC;padding: 10rpx;box-sizing: border-box;border-radius: 10rpx;"
						@tap="detail"
					>
						<image :src="item.mainImage" style="width: 245rpx;height: 120rpx;border-radius: 10rpx;" mode=""></image>
						<view class="title" style="margin: 4rpx 0rpx;font-size: 14rpx;">{{ item.title }}</view>
						<view class="name" style="margin: 6rpx 0rpx;font-size: 14rpx;">{{ item.nickName }}</view>
						<view class="price" style="display: flex;">
							<view style="color: #FF9900;" v-show="item.isFree == 1">￥{{ item.priceOriginal }}</view>
							<view style="color: #FF9900;" v-show="item.isFree == 0">免费</view>
							<view style="margin-left: 10rpx;font-size: 14rpx;">{{ item.commTotal }}人在学</view>
						</view>
					</swiper-item>
				</swiper>
			</view>
		</view>
		<view class="foont" style="padding: 20rpx;box-sizing: border-box;">
			<view style="display: flex;padding: 0rpx 20rpx;">
				<view style="display: flex;justify-content: space-between;width: 100%;align-items: center;">
					<view style="font-size: 40rpx;display: flex;">
						免费精选
						<view
							style="background-color: red;border-top-left-radius:10rpx;font-size: 14rpx;color: #fff;border-bottom-right-radius:10rpx;border-top-right-radius: 10rpx;padding: 6rpx;"
						>
							FREE
						</view>
					</view>

					<view style="color: #ccc;">全部></view>
				</view>
			</view>
			<swiper next-margin="40rpx" style="height: 1050rpx;">
				<swiper-item class="swiper-item1" style="height: 1050rpx;"><LIST :list1="newTopBar1" @detaile="detail"></LIST></swiper-item>
				<swiper-item class="swiper-item1" style="height: 2000rpx;"><LIST :list1="newTopBar2" @detaile="detail"></LIST></swiper-item>
			</swiper>
		</view>
		<view class="fook">
			<view style="display: flex;padding: 0rpx 20rpx;">
				<view style="display: flex;justify-content: space-between;width: 100%;align-items: center;">
					<view style="font-size: 40rpx;display: flex;">
						免费精选
						<view
							style="background-color: red;border-top-left-radius:10rpx;font-size: 14rpx;color: #fff;border-bottom-right-radius:10rpx;border-top-right-radius: 10rpx;padding: 6rpx;"
						>
							FREE
						</view>
					</view>

					<view style="color: #ccc;">全部></view>
				</view>
			</view>
			<LIST :list1="LIst" @detaile="detail"></LIST>
			<view v-if="LIst.length >= 40" style="text-align: center;">到底了</view>
		</view>

		<view class="wrap"><u-back-top :scroll-top="scrollTop"></u-back-top></view>
	</view>
</template>

<script>
import api from '@/api/api.js';
import LIST from '@/components/list/list.vue';
export default {
	components: { LIST },
	data() {
		return {
			bannerList: [],
			show: false,
			mode: 'date',
			list: [],
			list1: [],
			list2: [],
			topBar: [],
			newTopBar1: [],
			newTopBar2: [],
			LIst: [],
			page: 1,
			scrollTop: 0,
			top: 0,
			shu: 0,
			statusBarHeight: 0, //状态栏高度
			searchWidth: 0, //搜索框的宽度
			searchHeight: 0, //搜索框的高度
			searchMarginTop: 0, //搜索框上边距
			navHeight: 0
		};
	},
	onLoad() {
		//调用轮播
		this.loadBannerData();
		//获取nav
		this.nav();
		//列表
		this.getlis();
		this.getss();
		this.getssq();
		this.getLI();
		this.gitinp();
	},
	methods: {
		gitinp() {
			const res = uni.getMenuButtonBoundingClientRect();
			console.log(res, '11111111');
			const { top, width, height, right } = res; //获取胶囊的信息
			uni.getSystemInfo({
				success: res => {
					let sta = res.statusBarHeight;
					const margin = top - sta;
					console.log(height + sta + margin * 2);
					this.statusBarHeight = sta;
					this.navHeight = height + sta + margin * 2;
					this.searchMarginTop = sta + margin; // 状态栏 + 胶囊按钮边距
					this.searchHeight = height; // 与胶囊按钮同高
					this.searchWidth = right - width - 30; // 胶囊按钮右边坐标 - 胶囊按钮宽度 = 按钮左边可使用宽度，再减去30两边间距
				}
			});
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
			if (e.scrollTop > 50) {
				this.show = true;
			} else {
				this.show = false;
			}
		},

		//获取nav的信息
		async nav() {
			const { data } = await api.getnav();
			this.list = data.splice(0, 7);
			this.list.push({
				name: '全部分类'
			});
		},
		navtap(e) {
			console.log(e);
		},
		// 查询轮播图数据
		async loadBannerData() {
			const { data } = await api.getAdvertList(1);
			this.bannerList = data;
			console.log(data)
		},
		//列表的数据
		async getlis() {
			const { data } = await api.getListt({ sort: 'hot' }, 1, 10);
			console.log(data.records);
			this.list1 = data.records.filter((item, index) => {
				if (index < 5 == true) {
					return item;
				}
			});
			this.list2 = data.records.filter((item, index) => {
				if (index >= 5 == true) {
					return item;
				}
			});
		},
		async getss() {
			const { data } = await api.getListt({ isFree: 1 }, 1, 10);
			this.topBar = data.records;
		},
		async getssq() {
			const { data } = await api.getListt({ sort: 'new' }, 1, 10);
			console.log(data.records);
			this.newTopBar1 = data.records.filter((item, index) => {
				if (index < 5 == true) {
					return item;
				}
			});
			this.newTopBar2 = data.records.filter((item, index) => {
				if (index >= 5 == true) {
					return item;
				}
			});
		},
		async getLI() {
			const { data } = await api.getListt({ isFree: 0 }, this.page, 10);
			console.log(data.records);
			let arr = this.LIst;
			if (arr.length >= 40) {
				console.log('到底了');
			} else {
				this.LIst = [...arr, ...data.records];
			}
		},
		detail() {
			uni.navigateTo({
				url: '../detaile/detaile'
			});
		},
		onReachBottom() {
			this.page++;
			this.getLI();
		},
		inp() {
			uni.navigateTo({
				url: '../search/search'
			});
		}
	}
};
</script>

<style lang="scss">
.search-input {
	position: sticky;
	box-sizing: border-box;
	background: #eb4450;
	top: 0;
	z-index: 9999;
}
.input-box {
	box-sizing: border-box;
	padding: 0 30rpx;
	margin: 0 30rpx;
	background: #f7f7f7;
	border-radius: 30rpx;
}
.boxx {
	width: 100px;
	height: 100px;
	border-radius: 15px;
}
.box {
	width: 100%;
	.header {
		width: 100%;
		height: 85rpx;
		position: fixed;
		left: 0;
		top: 0;
		z-index: 1;
		background-color: rgba(52, 93, 194, 0);
		color: rgb(255, 255, 255);
		.input1 {
			width: 100%;
			height: 60rpx;
			border: 1rpx solid #c0c0c0;
			position: fixed;
			left: 0;
			top: 10rpx;
			z-index: 1;
			border-radius: 50rpx;
			text-align: center;
			background-color: #fff;
			font-size: 20rpx;
		}
	}
	.banner {
		swiper {
			height: 400rpx;
			swiper-item {
				width: 100%;
				height: 400rpx;
				padding: 20rpx;
				padding-bottom: 0;
				padding-top: 80rpx;
				.img {
					width: 100%;
					height: 100%;
					image {
						width: 100%;
						height: 100%;
						box-sizing: border-box;
						border-radius: 20rpx;
					}
				}
			}
		}
	}
	.nav {
		margin-top: 20rpx;
		width: 100%;
		height: 160rpx;
		display: flex;
		align-items: center;
	}
	.list {
		width: 100%;
		swiper {
			width: 100%;
			padding: 0rpx 20rpx;
			.swiper-item1 {
				width: 100%;
				height: 100%;
				// background-color: #2c405a;
			}
			.swiper-item2 {
				width: 100%;
				height: 100%;
				// background-color: #007aff;
			}
		}
	}
	.foot {
		.scroll-view_H {
			width: 100%;
			white-space: nowrap;
		}
	}
}
.active {
	background-image: linear-gradient(rgb(0, 108, 0) 50%, rgb(255, 255, 255));
}
.active2 {
	background-image: linear-gradient(rgb(69, 50, 140) 50%, rgb(255, 255, 255));
}
.active3 {
	background-image: linear-gradient(rgb(0, 114, 183) 50%, rgb(255, 255, 255));
}
.head {
	width: 100%;
	height: 85rpx;
	position: fixed;
	left: 0;
	top: 0;
	z-index: 1;
	background-image: linear-gradient(rgb(52, 93, 194) 100%, rgb(255, 255, 255));
	.input1 {
		width: 100%;
		height: 60rpx;
		border: 1rpx solid #c0c0c0;
		position: fixed;
		left: 0;
		top: 10rpx;
		z-index: 1;
		border-radius: 50rpx;
		text-align: center;
		background-color: #fff;
		font-size: 20rpx;
	}
}
</style>
